<div *ngIf="taskExecution$ | async as taskExecution; else loading">

  <div class="heading">
    <div class="description">
      <h1>Task Execution Details - Execution ID: {{ taskExecution.executionId }}</h1>
    </div>
  </div>

  <table *ngIf="taskExecution" class="table table-hover" style="margin-top:20px">
    <thead>
    <tr>
      <th style="width: 200px">Property</th>
      <th style="width: 200px">Value</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Execution Id</td>
      <td>{{ taskExecution.executionId }}</td>
    </tr>
    <tr>
      <td>Task Name</td>
      <td>
        <a [routerLink]="'/tasks/definitions/' + taskExecution.taskName">{{ taskExecution.taskName }}</a>
      </td>
    </tr>
    <tr>
      <td>Arguments</td>
      <td>{{ taskExecution.arguments || 'N/A' }}</td>
    </tr>
    <tr>
      <td>External Execution Id</td>
      <td>{{ taskExecution.externalExecutionId || 'N/A' }}</td>
    </tr>
    <tr>
      <td>Start Time</td>
      <td>{{ taskExecution.startTime | dataflowDateTime }}</td>
    </tr>
    <tr>
      <td>End Time</td>
      <td>{{ taskExecution.endTime | dataflowDateTime }}</td>
    </tr>
    <tr>
      <td>Batch Job</td>
      <td>
        <span *ngIf="taskExecution.jobExecutionIds.length > 0" class="glyphicon glyphicon-ok text-info"></span>
        <span *ngIf="taskExecution.jobExecutionIds.length == 0" class="glyphicon glyphicon-remove text-danger"></span>
      </td>
    </tr>
    <tr>
      <td>Job Execution Ids</td>
      <td *ngIf="taskExecution.jobExecutionIds.length > 0" id="jobExecutionIds">
        <a [routerLink]="'/jobs/executions/' + jobExecutionId"
           *ngFor="let jobExecutionId of taskExecution.jobExecutionIds">
          {{ jobExecutionId }}
        </a>
      </td>
      <td *ngIf="taskExecution.jobExecutionIds.length == 0">
        N/A
      </td>
    </tr>
    <tr>
      <td>Start Time</td>
      <td>{{ taskExecution.startTime | dataflowDateTime }}</td>
    </tr>
    <tr>
      <td>End Time</td>
      <td>{{ taskExecution.endTime | dataflowDateTime }}</td>
    </tr>
    <tr>
      <td>Duration</td>
      <td>{{ taskExecution.startTime | dataflowDuration: taskExecution.endTime }}</td>
    </tr>
    <tr>
      <td>Exit Code</td>
      <td>{{ taskExecution.exitCode }}</td>
    </tr>
    <tr>
      <td>Exit Message</td>
      <td>{{ taskExecution.errorMessage || 'N/A' }}</td>
    </tr>
    </tbody>
  </table>

  <div class="text-center">
    <button type="button" id="back-button" class="btn btn-default" (click)="cancel()">Back</button>
  </div>

</div>
<ng-template #loading>
  <app-loader></app-loader>
</ng-template>
